<template>
    <div id="container">
        <div id="viewDiv"></div>
        <el-main style="position:absolute;left:50px;top:20px;background-color:rgb(255,255,255);">
            <div style="display:flex;flex-direction: row;">
                <el-select v-model="select"  placeholder="请选择统计方式" style="width:200px">
                    <el-option value="sum" label="求和">求和</el-option><el-option value="avg" label="求平均值" ></el-option>
                    <el-option value="max" label="求最大值">求最大值</el-option><el-option value="min" label="求最小值"></el-option>
                </el-select>
                <el-button @click="click" type="primary" plain style="margin-left:20px;">查询</el-button>
            </div>
            <el-table :data="tableData" style="width:380px;margin-top:15px;"><!--块元素-->
                <el-table-column prop="xiaomai" label="小麦"></el-table-column>
                <el-table-column prop="yumi" label="玉米"></el-table-column>
                <el-table-column prop="dami" label="大米"></el-table-column> 
            </el-table>
        </el-main>
   </div>
</template>
   
<script setup>
    import {onMounted,ref} from 'vue'
    import Map from '@arcgis/core/Map'
    import MapView from '@arcgis/core/views/MapView'
    import * as queryClass from '@arcgis/core/rest/query'
    import Query from '@arcgis/core/rest/support/Query'
    import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
    var map,view,query,featureLayer
    const tableData=ref()
    const select=ref('')
    var queryURL="https://ws8575.club/web/rest/services/Hosted/山东省市界_玉米小麦大米产量_面要素_要素图层_3857/FeatureServer/0"
    const click=()=>{
        if(!select.value){
            return
        }
        query=new Query({//创建查询参数对象,设置为返回几何
            outStatistics:[//outStatisticFieldName疑似不能为中文
                {onStatisticField:"小麦",outStatisticFieldName:"xiaomai",statisticType:`${select.value}`},
                {onStatisticField:"玉米",outStatisticFieldName:"yumi",statisticType:`${select.value}`},
                {onStatisticField:"大米",outStatisticFieldName:"dami",statisticType:`${select.value}`},
            ]
        })
        queryClass.executeQueryJSON(queryURL,query).then((featureSet)=>{
            var result=featureSet.features.map((item)=>{
                return item.attributes
            })
            tableData.value=result.map((item)=>{//保留指定小数位数,将数值型数据转换成文本型数据
                item.xiaomai=item.xiaomai.toFixed(2)
                item.yumi=item.yumi.toFixed(2)
                item.dami=item.dami.toFixed(2)
                return item
            })
        })
    }
    onMounted(()=>{
        featureLayer=new FeatureLayer({
            url:"https://ws8575.club/web/rest/services/Hosted/山东省市界_玉米小麦大米产量_面要素_要素图层_3857/FeatureServer/0",
            renderer:{
                type:"pie-chart",
                attributes: [{
                    field: "大米",
                    color: [200,50,50]
                }, {
                    field: "小麦",
                    color: [50,200,50]
                }, {
                    field: "玉米",
                    color: [50,50,200]
                }],
                outline:{
                    width:1,
                    color:[255,255,255]
                },
                size:25,
                backgroundFillSymbol:{
                    color: [0,0,0,0.2],
                    outline: {
                        width: 1,
                        color: [1,1,1]
                    }
                },
                visualVariables:[{
                    type:"size",
                    valueExpression:`$feature.大米+$feature.小麦+$feature.玉米`,
                    minDataValue: 70000,//小于该值的归为一类
                    maxDataValue: 150000,//大于该值的归为一类
                    minSize: 15,//对应值最小的一类的尺寸
                    maxSize:30//对应值最大的一类的尺寸
                }]
            },
            labelingInfo:[{
                labelExpressionInfo:{
                    expression:`"玉米产量:"+$feature.玉米+TextFormatting.NewLine+"小麦产量:"+$feature.小麦+TextFormatting.NewLine+"大米产量:"+$feature.大米`
                },
                symbol:{
                    type:"text",
                    color:[255,255,255],
                    size:13,
                    haloColor:[50,50,50],
                    haloSize:1,
                    xoffset:50
                },
                minScale:2000000
            }]
        })
        map=new Map({
            basemap:"satellite",
            layers:[featureLayer]
        })
        view=new MapView({
            map:map,
            container:"viewDiv",
            center:[118.4,36.1],
            zoom:7,
            constraints:{
                rotationEnabled:false,
                maxScale:2000
            }
        })
        view.ui.remove(["zoom","attribution"])
    })
</script>

<style scoped>
#container,#viewDiv{
  width:100%; height:100%; padding:0;margin:0;
}
span{
    vertical-align: middle;
    white-space: pre-line;
}
</style>
